<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<text class="text_1">我们要对您绑定的手机号进行验证：</text>
			<text class="text_2">{{ phone }}</text>
			<view class="flex-col group_2">
				<view class="c1">
					<u-code-input v-model="msg" :maxlength="6" size="65" fontSize="40" @finish="finish"></u-code-input>
				</view>

				<text class="text_3" @tap="getCode">{{tips}}</text>
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<!-- <u-button ></u-button> -->
				</view>

			</view>
			<view class="flex-col items-center button" @click="submits"><text class="text_4">下一步</text></view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				// phone: userInfo.phone,
				phone: 13663817501,
				msg: '',
				seconds: 60,
				tips: '',
				code: ''
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onShow(e) {
			var telephone
			uni.getStorage({
				key: 'userInfo',
				success: function (res) {
					telephone = res.data.phone
				}
			});
			this.phone = telephone
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('user.code', {
						phone: this.phone
					}).then(r => {
						if (r.code == 200) {
							this.code = r.data;
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							this.msg = r.data
						} else {
							uni.$u.toast(r.msg);
						}
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('请输入验证短信');
			},
			start() {
				uni.$u.toast('我们已经发送了验证短信到你的手机');
			},
			finish(e) {
				console.log(e)
			},
			submits() {
				if (this.msg == '') {
					this.$u.toast('请输入短信验证码');
					return;
				}
				if(this.code != this.msg)
				{
					this.$u.toast('验证码输入有误');
					return;
				}
				uni.redirectTo({
							url: '/pages/my/setting/security/oldpassword_2',
						});
				// this.$http('user.changePhone', {code :this.code,}).then(r => {
				// 	if (r.code == 200) {
				// 		this.$u.toast(r.msg);
				// 		this.getUserInfo(r.data.token);
				// 		setTimeout(() => {
				// 			this.go('/pages/index/my');
				// 		}, 1000)

				// 	} else {
				// 		this.$u.toast(r.msg);
				// 	}
				// });

			}
		},
	};
</script>

<style scoped lang="scss">
	.image_2 {
		width: 1rpx;
		height: 86rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_1 {
		padding: 101.5rpx 0 555rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.text_1 {
		align-self: center;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_2 {
		font-weight: 800;
		margin-top: 53rpx;
		align-self: center;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_2 {
		margin-top: 59rpx;
		padding: 0 70rpx;
	}

	.button {
		margin-top: 113rpx;
		padding: 19rpx 0 31rpx;
		align-self: center;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836444497688227.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 640rpx;
	}

	.section_2 {
		padding: 0 101rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836409901363882.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_3 {
		margin-top: 46rpx;
		align-self: center;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.c1 {
		display: flex;
		flex-direction: row;
		justify-content: center;

	}
</style>
